.page {
  padding: 24rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.task-container {
  .box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #1a1a1a;
    }

    .required {
      color: #ff4d4f;
      margin-left: 8rpx;
      font-size: 32rpx;
    }

    .subtitle {
      color: #999;
      font-size: 24rpx;
      margin-left: 8rpx;
    }
  }

  // 内容输入区域
  .content-section {
    .content-textarea {
      min-height: 200rpx;
      border: 2rpx solid #f0f0f0;
      border-radius: 12rpx;
      padding: 24rpx;
      font-size: 28rpx;
      line-height: 1.6;
      
      &:focus {
        border-color: #667eea;
      }
    }
  }

  // Logo上传区域
  .logo-section {
    .logo-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200rpx;
      border: 2rpx dashed #d9d9d9;
      border-radius: 12rpx;
      background-color: #fafafa;
      transition: all 0.3s ease;

      &:active {
        background-color: #f0f0f0;
      }

      .upload-text {
        margin-top: 16rpx;
        color: #999;
        font-size: 24rpx;
      }
    }

    .logo-preview {
      .logo-image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        background-color: #f5f5f5;
      }

      .logo-actions {
        display: flex;
        justify-content: center;
        gap: 32rpx;
        margin-top: 16rpx;

        .delete-btn {
          color: #ff4d4f !important;
        }
      }
    }
  }

  // 单选组样式
  .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
  }

  // 操作按钮区域
  .action-section {
    display: flex;
    gap: 24rpx;
    margin-top: 48rpx;
    padding: 0 24rpx;

    .preview-btn,
    .submit-btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 600;
    }

    .preview-btn {
      border-color: #667eea;
      color: #667eea;
    }

    .submit-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      color: #fff;
      
      &.t-button--disabled {
        background: #ccc !important;
      }
    }
  }
}

/* 动画效果 */
.box {
  opacity: 0;
  transform: translateY(20rpx);
  animation: fadeInUp 0.6s ease forwards;
}

.content-section { animation-delay: 0.1s; }
.other-content-section { animation-delay: 0.2s; }
.logo-section { animation-delay: 0.3s; }
.speaker-section { animation-delay: 0.4s; }
.emotion-section { animation-delay: 0.5s; }
.style-section { animation-delay: 0.6s; }
.action-section { animation-delay: 0.7s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 400px) {
  .page {
    padding: 16rpx;
    padding-bottom: 32rpx;
  }
  
  .task-container {
    .box {
      padding: 24rpx 16rpx;
      margin-bottom: 16rpx;
    }

    .action-section {
      flex-direction: column;
      gap: 16rpx;
      padding: 0 16rpx;
    }
  }
}

/* TDesign组件样式覆盖 */
.t-textarea {
  --td-textarea-border-color: #f0f0f0;
  --td-textarea-border-radius: 12rpx;
}

.t-input {
  --td-input-border-color: #f0f0f0;
  --td-input-border-radius: 12rpx;
}

.t-radio {
  --td-radio-color: #667eea;
} 